<template>
  <div>
    <table>
      <tr>
        <th>日期</th>
        <th>姓名</th>
        <th>地点</th>
        <th colspan='2'>操作</th>
      </tr>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.date }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.address }}</td>
        <td><el-button :plain="true" @click="edit">编辑</el-button>
        <el-button :plain="true" @click="del">删除</el-button></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    edit() {
      this.$message("编辑");
    },
    del() {
      this.$message({
          message:'删除',
          type:'error'
      })
    },
  },
};
</script>

<style scoped>
table {
  margin: 0 auto;
  border: 1px solid #ccc;
  /* border-collapse: collapse; */
  /* margin: 0 auto; */
}
tr {
  line-height: 28px;
}
.el-tab{
  margin: 0 auto;
  width: 600px;
}
tr th {
  padding: 10px 40px;
}
th:nth-of-type(4){
  padding: 10px 96px;
}
</style>